<template>
  <ul v-if="sellerInfo.supports" class="supports">
    <li 
      class="support-item border-bottom"
      v-for="(item, index) in sellerInfo.supports"
      :key="index"
    >
      <support-icon :size="size" :type="item.type"></support-icon>
      <span class="text">{{item.description}}</span>
    </li>
  </ul>
</template>

<script>
import SupportIcon from '@/components/support-icon/support-icon'

export default {
  name: 'Support',
  props: {
    sellerInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    size: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      supportClass: [
        "decrease",
        "discount",
        "guarantee",
        "invoice",
        "special"
      ]
    }
  },
  components: {
    SupportIcon
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/stylus/mixin'
  .supports
    width 80%
    margin 0 auto 
    .support-item
      padding 0 12px
      margin-bottom 12px
      font-size 0
      &:last-child
        margin-bottom 0
        border-none()
      .text
        line-height 16px
        font-size 12px
</style>

